import echarts from 'echarts';
export default function getBubbleChart(optionSet = []) {
  console.log('optionSet', optionSet);
  const data = [];

  optionSet.forEach(j => {
    data.push(j.data.map(i => {
      return [i.a, i.b, i.d, i.c, j.label];
    }));
  });

  let res = [];
  let legend = [];

  if (optionSet.length) {
    legend = optionSet.map(i => i.label);
    res = [{
      name: optionSet[0].label,
      data: data[0],
      type: 'scatter',
      symbolSize: function(data) {
        return Math.sqrt(data[2]) / 5e2;
      },
      label: {
        emphasis: {
          color: 'brown',
          show: true,
          formatter: function(param) {
            return param.data[3];
          },
          position: 'top'
        }
      },
      itemStyle: {
        normal: {
          shadowBlur: 10,
          shadowColor: 'rgba(120, 36, 50, 0.5)',
          shadowOffsetY: 5,
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
            offset: 0,
            color: 'rgb(251, 118, 123)'
          }, {
            offset: 1,
            color: 'rgb(204, 46, 72)'
          }])
        }
      }
    }, {
      name: optionSet[1].label,
      data: data[1],
      type: 'scatter',
      symbolSize: function(data) {
        return Math.sqrt(data[2]) / 5e2;
      },
      label: {
        emphasis: {
          color: 'skyblue',
          show: true,
          formatter: function(param) {
            console.log('param', param);
            return param.data[3];
          },
          position: 'top'
        }
      },
      itemStyle: {
        normal: {
          shadowBlur: 10,
          shadowColor: 'rgba(25, 100, 150, 0.5)',
          shadowOffsetY: 5,
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
            offset: 0,
            color: 'rgb(129, 227, 238)'
          }, {
            offset: 1,
            color: 'rgb(25, 183, 207)'
          }])
        }
      }
    }];
  }

  const option = {
    tooltip: {
      textStyle: {
        color: 'red'
      }
    },
    legend: {
      right: 10,
      data: legend
    },
    xAxis: {
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    yAxis: {
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      scale: true
    },
    series: res
  };


  return option;
}
